<template>
  <div class="search-container">
    <el-form ref="searchRef" :model="query" :inline="true">
      <el-form-item
        :label="item.label"
        :prop="item.prop"
        v-for="item in options"
      >
        <!-- 文本框、下拉框、日期框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="query[item.prop]"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          clearable
          @change="handleChange"
          @keyup.enter="search"
        ></el-input>
        <el-select
          v-else-if="item.type === 'select'"
          v-model="query[item.prop]"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          clearable
          @change="handleChange"
        >
          <el-option
            v-for="opt in item.opts"
            :label="opt.label"
            :value="opt.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-else-if="item.type === 'date'"
          type="date"
          v-model="query[item.prop]"
          :value-format="item.format"
          @change="handleChange"
        ></el-date-picker>
        <el-date-picker
          v-else-if="item.type === 'datepicker'"
          type="daterange"
          v-model="dateRange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :value-format="item.format || 'YYYY-MM-DD'"
          @change="item.onChange || handleDateRangeChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="search"
          >搜索</el-button
        >
        <el-button :icon="Refresh" @click="resetForm(searchRef)"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { FormInstance } from "element-plus";
import { Search, Refresh } from "@element-plus/icons-vue";
import { PropType, ref } from "vue";
import { FormOptionList } from "@/types/form-option";

export default {
  name: "TableSearch",
  components: {
    Search,
    Refresh,
  },
  props: {
    query: {
      type: Object,
      required: true,
    },
    options: {
      type: Array as PropType<Array<FormOptionList>>,
      required: true,
    },
    search: {
      type: Function,
      default: () => {},
    },
  },
  setup(props) {
    const searchRef = ref<FormInstance>();
    const dateRange = ref([]);

    const handleChange = () => {
      // 延迟触发搜索，避免频繁请求
      setTimeout(() => {
        props.search();
      }, 300);
    };

    const handleDateRangeChange = (val: [string, string]) => {
      // 默认的日期范围处理，若组件提供了自定义onChange则优先使用自定义的
      if (val && val.length === 2) {
        props.query.startDate = val[0];
        props.query.endDate = val[1];
      } else {
        props.query.startDate = '';
        props.query.endDate = '';
      }
      props.search();
    };

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
      dateRange.value = [];
      // 重置后立即搜索
      props.search();
    };

    return {
      searchRef,
      dateRange,
      resetForm,
      handleChange,
      handleDateRangeChange,
      Search,
      Refresh,
    };
  },
};
</script>

<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* 增加输入框和下拉框的默认宽度 */
:deep(.el-input) {
  width: 200px !important;
}

:deep(.el-select) {
  width: 200px !important;
}

:deep(.el-date-editor) {
  width: 220px !important;
}

/* 日期范围选择器需要更宽 */
:deep(.el-date-editor--daterange) {
  width: 320px !important;
}

/* 表单项间距 */
:deep(.el-form-item) {
  margin-right: 20px;
  margin-bottom: 15px;
}
</style>
